<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 600px;
				height: auto;
				font-size: 12px;
			}
			
			.title {
				width: 96%;
				height: 50px;
				margin: 10px auto;
				border-bottom: 1px solid darkgray;
			}
			
			.title h4 {
				font-size: 18px;
				font-weight: 500;
				color: #000 !important;
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<div class="title">
				<h4 style="float: left;">高级查询</h4>
			</div>
			<el-form ref="goodForm" :model="goodForm" :rules="rules" label-width="100px">
				
				
						<el-form-item  prop="gname" label="产品名称：" style="width:100%">
							<el-autocomplete v-model="goodForm.gname" class="inline-input" :fetch-suggestions="querySearch" :trigger-on-focus="false"  @select="handleSelect">
							<template slot-scope="{ item }">
								  <div class="name">{{ item.goo_name }}</div>
							</template>
							</el-autocomplete>
						</el-form-item>
					<el-form-item label="产品类别：" prop="catid" style="width:80%">
						<el-input v-model="goodForm.catid"></el-input>
					</el-form-item>
				
						<el-form-item prop="gid" label="编号/条码：" style="width:80%">
							<el-input v-model="goodForm.gid"></el-input>
						</el-form-item>
						
					<el-form-item label="状态：" prop="pstatus">
						<el-select placeholder="未选" v-model="goodForm.gstatus">
							<el-option label="正常" :value="506"></el-option>
							<el-option label="停售" :value="507"></el-option>
					</el-select>
					</el-form-item>

			<el-form-item label="价格区间：">
				<el-col :span="8">
					<el-form-item prop="xprice">
						<el-input v-model="goodForm.xprice"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="0.5">
					<el-form-item>
						-
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="dprice">
						<el-input v-model="goodForm.dprice"></el-input>
					</el-form-item>
				</el-col>
			</el-form-item>

			</el-form>
			<div class="title">
				<el-button type="primary" style="margin-left: 250px;" @click="onSubmit('goodForm')">高级查询</el-button>
			</div>

		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data() {
					
					return {
						goodForm: {
							gname: '',
							catid: '',
							gid: '',
							gstatus: '',
							xprice: '',
							dprice: '',
							//默认每页数据量
			                pagesize: 10,
			              	//当前页码
			                currentPage: 1,
			                restaurants:[]
						}
					}
				},
				methods: {
					querySearch: function(queryString, cb) {
						 var allarr = this.goodForm.restaurants;
				    	var newsarr = [];
							allarr.forEach(v => {
								 var strs =v.goo_name+"";
								 
								 if (strs.indexOf(queryString) >= 0) {
										newsarr.push(v);
										console.info(strs);
										console.info(v);
									} 
							})
							// 调用 callback 返回建议列表的数据
							cb(newsarr);
					},
					handleSelect: function(it) {
						console.log(it.supname);
						this.goodForm.gname=it.goo_name;
					},
					
					onSubmit(formName) {
				    	//验证方法
				        this.$refs[formName].validate((valid) => {
				          if (valid) {
				        	  //post提交数据
				           	axios.post("/superQuery",
				           			//参数转换
				           			Qs.stringify(this.goodForm,{arrayFormat: 'brackets'})
				           			//ajax请求成功的回调函数
				           			).then(function(v){
				           			//window.parent.location.replace("/glist");
				           			console.log("回调成功，获取了服务器端返回的值v"+JSON.stringify(v.data));
				           	}).catch(function(e){
				           		alert("出错了"+e);
				           	});
				        	  
				        	  
				          } else {
				            console.log('error submit!!');
				          }
				        });
				      }

				},
				mounted() {
					//利用生命周期函数将所有商品信息放入数组
					this.goodForm.restaurants=${list};
					console.log(this.goodForm.restaurants);
				}
			})
		</script>
	</body>

</html>